<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="fruit"></div>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        var arr = [{
            id: 1,
            fname: 'apple',
        }, {
            id: 2,
            fname: 'bannner',
        }, {
            id: 3,
            fname: 'pear',
        }];
        var str = '<ul>';
        arr.forEach(function(item, index) {
            // str += '<li data-id="' + item.id + '">' + item.fname + '</li>';
            //这种方法是字符串的拼接
            str += `<li data-id="${item.id}">${item.fname}</li>`
        })
        str += '</ul>';
        $('#fruit').html(str);
        // var ul = document.getElementsByTagName('ul')[0];
        var ul = $('ul').eq(0);
        ul.click(function(e) {
            //e.target表示事件源
            // dataset表示所有的自定义属性
            console.log(e.target.dataset.id);
        })
    </script>
</body>

</html>